<template>
  <div>
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">到货管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>货物验收管理</el-breadcrumb-item>
        <el-breadcrumb-item>增加验收</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!--form表单搜索框-->
    <!-- 搜索筛选 -->
    <div>
      <el-form :inline="true"  class="driverReceipt-search" style="text-align: right">

        <el-form-item label="货运单号">
          <el-input size="small"  placeholder="货运单号"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <!--功能按钮-->
      <el-row :inline="true" style="text-align: right" >
        <el-button type="success" @click="addSalesmanAcceptFormVisible = true">增加</el-button>
        <!--        <el-button type="primary" @click="notifyCustomers = true">通知客户已到货</el-button>-->
      </el-row>
    </div>

    <!--增加新到货物弹出框-->
    <div>

      <el-dialog title="增加新到货物"  :visible.sync="addSalesmanAcceptFormVisible">
        <el-form :model="addSalesmanAcceptform" ref="addSalesmanAcceptform" :rules="rules" :inline="true" >
          <el-form-item label="货运单编号" label-width="150px"  prop="fid" >
            <el-input v-model="addSalesmanAcceptform.fid" autocomplete="off" @blur="panduanFC()"></el-input>
          </el-form-item>

          <el-form-item label="是否通过验收" label-width="250px" prop="ispass">
            <el-radio-group v-model="addSalesmanAcceptform.ispass" >
              <el-radio :label=true>是</el-radio>
              <el-radio :label=false>否</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="是否需要中转" label-width="250px" prop="istransit">
            <el-radio-group v-model="addSalesmanAcceptform.istransit">
              <el-radio :label=true>是</el-radio>
              <el-radio :label=false>否</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item >
            <el-button @click="addSalesmanAcceptFormVisible = false;resetForm('addSalesmanAcceptform')">取 消</el-button>
            <el-button type="primary" @click="addSalesmanAccept('addSalesmanAcceptform')">确 定</el-button>
          </el-form-item>
        </el-form>

      </el-dialog>

    </div>


    <div>


      <!--业务员验收列表-->
      <el-table :data="pageInfo.list" style="width: 100%">
        <!--      <el-table-column type="selection" width="55"></el-table-column>-->
        <el-table-column prop="id" label="验收单号" width="160"></el-table-column>
        <el-table-column prop="fid" label="货运单号" width="160"></el-table-column>
        <el-table-column prop="cid" label="运输合同号" width="160"></el-table-column>
        <el-table-column prop="ispass" label="是否通过" width="100">
          <template slot-scope="scope">
            {{scope.row.ispass?"通过":"未通过"}}
          </template>
        </el-table-column>
        <el-table-column prop="istransit" label="是否中转" width="100">
          <template slot-scope="scope">
            {{scope.row.istransit?"中转":"不中转"}}
          </template>
        </el-table-column>
          <el-table-column prop="arrivetime" label="验收时间" width="180">
            <template slot-scope="scope">
            <span v-html="timeTrans(scope.row.arrivetime)"></span>
            </template>
          </el-table-column>
        <el-table-column label="操作" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--修改新到货物弹出框-->
    <div>
      <el-dialog title="编辑业务员验收" :visible.sync="updateSalesmanAcceptFormVisible">
        <el-form :model="updateSalesmanAcceptform" :inline="true" label-width="80px">
          <!--          <el-form-item label="货运单编号(必填)" label-width="180px" >
                      <el-input v-model="updateSalesmanAcceptform.fid" autocomplete="off" @blur="panduanFC()"></el-input>
                    </el-form-item>-->

          <el-form-item label="是否通过验收" label-width="150px" >
            <el-radio-group v-model="updateSalesmanAcceptform.ispass" >
              <el-radio :label=true>是</el-radio>
              <el-radio :label=false>否</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="是否需要中转" label-width="150px" >
            <el-radio-group v-model="updateSalesmanAcceptform.istransit">
              <el-radio :label=true>是</el-radio>
              <el-radio :label=false>否</el-radio>
            </el-radio-group>
          </el-form-item>

          <!--          <el-form-item label="验收时间" label-width="150px" >

                      <el-date-picker
                          v-model="updateSalesmanAcceptform.arrivetime"
                          type="datetime"
                          placeholder="选择日期时间"
                          align="right"
                          :picker-options="pickerOptions">
                      </el-date-picker>
                    </el-form-item>-->

        </el-form>


        <div slot="footer" class="dialog-footer" >
          <el-button @click="updateSalesmanAcceptFormVisible = false;updateSalesmanAcceptform={}">取 消</el-button>
          <el-button type="primary" @click="updateSalesmanAccept()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!--      分页-->
    <div class="block">
      <el-pagination style="margin-left: 280px"
                     @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="pageInfo.pageNum" :page-sizes="[5, 10]" :page-size="pageInfo.pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"></el-pagination>
    </div>
  </div>
</template>

<script>
import Vue from "vue";

export default {
  name: "GoodsArrivalView",
  methods: {
    //格式化时间
    timeTrans(time) {
      let date = new Date(new Date(time).getTime() + 8 * 3600 * 1000)
      date = date.toJSON();


      date = date.substring(0, 19).replace('T', ' ')

      return date;
    },
    /*表格的修改和删除方法*/
    handleEdit(index, row) {
      console.log(index, row);
      this.updateSalesmanAcceptFormVisible=true;
      this.updateSalesmanAcceptform={...row}
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm('确定要删除该条验收记录?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        //发送axios
        this.axios.delete("http://localhost:8080/salesman/salesmanAcountDeleteById/" + row.id).then(res =>{
          if(res.data.code == 2002){
            this.getList();
            this.$message({
              type: 'success',
              message: res.data.msg
            });
          }else {
            this.$message({
              type: 'error',
              message: res.data.msg
            });
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    /*分页的两个方法*/
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize=val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage=val;
      this.getList();
    },
    getList(){
      this.axios.get("http://localhost:8080/salesman/SAfindByPage/" + this.currentPage + "/" + this.pageSize).then(res => {
        console.log(res.data.data.list);
        this.pageInfo = res.data.data;
        //if ()

      })
    },


    addSalesmanAccept(formName){
      //this.$message(formName);
      //this.$message(scope);
      //let aa = Vue();
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //发送axios
          this.axios.post("http://localhost:8080/salesman/salesmanAountAdd",this.addSalesmanAcceptform).then(res =>{
            this.$message(res.data.msg);
            this.addSalesmanAcceptform={};
            this.addSalesmanAcceptFormVisible=false;
            this.getList();

          })
        } else {
          this.$message("请填完必填选项！");
          return false;
        }
      });

    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    panduanFC(){

      this.axios.get("http://localhost:8080/salesman/pandaunFC/" + this.addSalesmanAcceptform.fid).then(res =>{
        /*if (res.data.cood == 2001){
          this.$message("有该订单请继续填写");
        }else {
          this.$message(res.data.msg);
          //this.addSalesmanAcceptform='';
        }*/
        this.$message(res.data.msg);

      })
    },
    updateSalesmanAccept(){
      this.axios.put("http://localhost:8080/salesman/salesmanAcountUpdate",this.updateSalesmanAcceptform).then(res=>{
        this.$message(res.data.msg);
        this.updateSalesmanAcceptform={};
        this.updateSalesmanAcceptFormVisible = false
        this.getList();
      })
    }


  },

  data() {
    return {
      rules: {
        fid: [
          { required: true, message: '这是必填选项', trigger: 'blur' },

        ],

        arrive_time: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],


        ispass: [
          { required: true, message: '请选择是否通过验收', trigger: 'change' }
        ],
        istransit: [
          { required: true, message: '请选择是否需要中转', trigger: 'change' }
        ],

      },
      activeName: 'first',
      //新增验收表弹出框参数
      addSalesmanAcceptFormVisible:false,

      addSalesmanAcceptform: {
        fid:'',
        cid:'',
        id:'',
        ispass:'',
        /*arrivetime:'',*/
        istransit:''
      },
      //编辑验收表弹出框参数
      updateSalesmanAcceptFormVisible:false,
      updateSalesmanAcceptform: {
        fid:'',
        cid:'',
        id:'',
        ispass:'',
        /*arrivetime:'',*/
        istransit:''
      },
      formLabelWidth: '100px',
      //业务员验收表数据
      //tableData: [],
      //当前页码
      currentPage:1,
      //每页显示的条数
      pageSize:5,
      //分页插件返回的json对象
      pageInfo:{},

      //这个是表单搜索需要的数据
      search: '',
      /*currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4*/
      //日期时间选择器
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      value1: '',
      value2: '',
    };
  },
  created() {
    //发送axios
    this.getList();
  },


}
</script>

<style scoped>

</style>